<script setup lang='ts'>
import articleApi from "@/apis/articleApi";
import bokInfo from "@/store/bokInfo";
import topicStore from "@/store/topicStore";
import userStore from "@/store/userStore";
import { ElMessage } from "element-plus";
import {ref} from "vue"
import { useRouter } from "vue-router";

const router = useRouter()
const input =ref("")

const Editor  =ref("")
 const show =ref<boolean>(false)

//话题提交之后，存到数据库中，然后跳转
 const submit =async()=>{
   //不能为空

if(input.value =="" || checkVal(Editor.value)){
   show.value=true
}
else{
   if(new Date().getTime()-topicStore().createtTime>10000){
   //TODO，存到数据库中
   const res= await  articleApi.storeTopic(userStore().info.id,input.value,Editor.value)
    //...
  if(res.msg=="插入成功"){
     //跳转到文章页面
     topicStore().setTime()
    
    router.push({name:'blogger.content.index'})
    ElMessage({
      message:'发表成功',
      type:'success'
    })
  }
  else{
   ElMessage({
      message:'发表失败',
      type:'warning'
    })
  }
 }
 else{
   ElMessage({
      message:'发表太过频繁,请过10s再试试',
      type:'warning'
    })
 }
}
 }

 //判断editor里面的内容是否为空
 function checkVal(str:any)
	{
		let num = 0,
		reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g;
		while (num < str.length && str != "")
		{
			num++;
			let k = str.match(reg);
			if (k) {
				str = str.replace(k[0], "");
			}
		}
		return str == "";
	}

</script>
<template>
  
<div class="border bg-slate-200 hover:shadow-lg rounded-md mr-[200px] shadow-md">
   <div class="border-b  p-3">
    <h1>发表话题</h1>
   </div>

  <div class="w-full p-4">
     <!-- input框 -->
   <el-input class="mb-5" size="large" v-model="input" placeholder="请输入帖子标题" />
   <WangEditorEditor  class="rounded-md  mb-5"  v-model="Editor"  />
   
   <p class="bg-red-400 rounded-md w-1/2 mb-4 text-sm" :class="{'animate-pulse':show}" 
   v-if="show">&nbsp;标题或文章内容不能为空</p>
<!-- 提交 -->
    <el-button type="primary" @click="submit">提交保存</el-button>
  </div>


</div>
</template>
<style scoped lang='scss'>


</style>